<template>
  <div id="app">
    <MyHeader :addTask="addTask"></MyHeader>
    <MyList :todos="todos"></MyList>
    <MyFooter
      :todos="todos"
      @clearDoneTask="clearDoneTask"
      @changeTaskDoneAll="handleChangeTaskDoneAll"
    ></MyFooter>
  </div>
</template>

<script>
import pubsub from "pubsub-js";

import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  name: "App",
  data: function () {
    const initTodos = localStorage.getItem("todos");
    return {
      todos: initTodos ? JSON.parse(initTodos) : [],
    };
  },
  watch: {
    todos: {
      deep: true,
      handler(newVal) {
        localStorage.setItem("todos", JSON.stringify(this.todos));
      },
    },
  },
  components: {
    MyHeader,
    MyFooter,
    MyList,
  },
  mounted() {
    // this.$bus.$on("deleteTask", this.deleteTask);
    this.$bus.$on("changeTaskDone", this.changeTaskDone);
    this.pubId = pubsub.subscribe("deleteTask", this.deleteTask);
    this.$bus.$on("updateTitle", this.updateTitle);
  },
  beforeDestroy() {
    this.$bus.$off(["deleteTask", "changeTaskDone"]);
    pubsub.unsubscribe(this.pubId);
    this.$bus.$off("updateTitle");
  },
  methods: {
    addTask(obj) {
      this.todos.unshift(obj);
    },
    deleteTask(_, id) {
      this.todos = this.todos.filter((item) => item.id !== id);
    },
    changeTaskDone(id) {
      this.todos = this.todos.map((item) => {
        if (item.id === id) {
          return { ...item, done: !item.done };
        }
        return item;
      });
    },
    updateTitle(id, name) {
      this.todos.forEach((todo) => {
        if (todo.id === id) {
          todo.name = name;
        }
      });
    },
    clearDoneTask() {
      this.todos = this.todos.filter((item) => !item.done);
    },
    handleChangeTaskDoneAll(done) {
      this.todos = this.todos.map((item) => {
        return { ...item, done };
      });
    },
  },
};
</script>

<style>
/* 整体卡片 */
#app {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 顶部输入框 */
#app > div:first-child input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}
#app > div:first-child input:focus {
  border-color: #3f63f7;
  outline: none;
}

/* 任务列表 */
ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
li {
  margin-bottom: 10px;
}
li > div {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f7f9fc;
  border-radius: 8px;
  transition: background 0.2s;
}
li > div:hover {
  background: #eef2fd;
}

/* 复选框 */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  cursor: pointer;
}

/* 任务文字 */
span {
  font-size: 16px;
  color: #333;
}

/* 按钮组靠右 */
.button-group {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* 按钮样式 */
button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.edit-btn {
  background: #3f63f7;
  color: #fff;
}
.edit-btn:hover {
  background: #3256d9;
}
.delete-btn {
  background: #f5f5f5;
  color: #d93025;
}
.delete-btn:hover {
  background: #fce8e6;
}

/* 底部栏 */
#app > div:last-child {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}
#app > div:last-child button {
  background: transparent;
  color: #3f63f7;
  border: 1px solid #3f63f7;
}
#app > div:last-child button:hover {
  background: #3f63f7;
  color: #fff;
}
</style>
